<template>
    <div class="recommend-item" @click="toTargetPage">
        <div class="body row">
            <div class="content">
                <div class="title">{{item.title}}</div>
                <div class="desc text-overflow-ellipsis-2">{{item.desc}}</div>
                <div class="tags">
                    <span v-for="(tag,index) in item.tags" :key="index" class="tag">{{tag}}</span>
                </div>
            </div>

            <div class="cover-img">
                <img :src="item.coverImg" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        item: Object
    },
    data() {
        return {};
    },

    methods: {
        toTargetPage() {
            this.$router.push({
                path: `/article/detail`,
                query: { docId: this.item._id }
            });
        }
    }
};
</script>


<style lang="less" scoped>
.recommend-item {
    padding: 0 30px 0 30px;
    .body {
        padding: 30px 0;
        width: 100%;
        border-bottom: 1px solid #eee;

        .content {
            flex: 1 1 auto;

            .title {
                font-weight: 600;
                margin-bottom: 10px;
            }

            .desc {
                color: #666;
                margin-bottom: 30px;
            }

            .tags {
                .tag {
                    display: inline-block;
                    color: #6a6a6a;
                    border: 1px solid rgba(106, 106, 106, 0.5);
                    border-radius: 3px;
                    padding: 3px 10px;
                    margin-right: 20px;
                }
            }
        }

        .cover-img {
            flex: 0 0 auto;
            overflow: hidden;
            width: 250px;
            max-height: 250px;
            border-radius: 10px;
            font-size: 0;

            img {
                width: 100%;
            }
        }
    }
}
</style>